<template>
	<Dialog :title="dialogTitle" v-model="dialogVisible">
		<el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" v-loading="formLoading">

			<el-form-item label="图库类型" prop="type">
				<el-select v-model="formData.type" placeholder="请选择图库类型" clearable class="w100%!">
					<el-option v-for="(dict, index) in getStrDictOptions(DICT_TYPE.BLIND_BACKGROUND_TYPE)" 
					:key="index"
						:label="dict.label" 
						:value="dict.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="图库名称" prop="name">
				<el-input v-model="formData.name" placeholder="请输入图库名称" />
			</el-form-item>


			<el-form-item label="上传图片" prop="url">
				<UploadImg v-model="formData.url" :limit="1" :is-show-tip="false" />
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
			<el-button @click="dialogVisible = false">取 消</el-button>
		</template>
	</Dialog>
</template>
<script setup lang="ts">
	import * as BackgroundApi from '@/api/blind/background'
	import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'

	const { t } = useI18n() // 国际化
	const message = useMessage() // 消息弹窗

	const dialogVisible = ref(false) // 弹窗的是否展示
	const dialogTitle = ref('') // 弹窗的标题
	const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
	const formType = ref('') // 表单的类型：create - 新增；update - 修改
	const formData = ref({
		name: undefined,
		type: undefined,
		url: undefined,
		status: 0
	})
	const formRules = reactive({
		name: [{ required: true, message: '图库图片名称不能为空', trigger: 'change' }],
		type: [{ required: true, message: '图库图片类型不能为空', trigger: 'change' }],
		url: [{ required: true, message: '图库图片不能为空', trigger: 'change' }]
	})
	const formRef = ref() // 表单 Ref



	/** 打开弹窗 */
	const open = async (type : string, id ?: number) => {
		dialogVisible.value = true
		dialogTitle.value = t('action.' + type)
		formType.value = type
		resetForm()
		// 修改时，设置数据
		if (id) {
			formLoading.value = true
			try {
				formData.value = await BackgroundApi.getBackground(id)
			} finally {
				formLoading.value = false
			}
		}
	}
	defineExpose({ open }) // 提供 open 方法，用于打开弹窗

	/** 提交表单 */
	const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
	const submitForm = async () => {
		// 校验表单
		if (!formRef) return
		const valid = await formRef.value.validate()
		if (!valid) return
		// 提交请求
		formLoading.value = true
		try {
			const data = formData.value as unknown as BackgroundApi.BackgroundBaseVO
			if (formType.value === 'create') {
				await BackgroundApi.createBackground(data)
				message.success(t('common.createSuccess'))
			} else {
				await BackgroundApi.updateBackground(data)
				message.success(t('common.updateSuccess'))
			}
			dialogVisible.value = false
			// 发送操作成功的事件
			emit('success')
		} finally {
			formLoading.value = false
		}
	}


	/** 重置表单 */
	const resetForm = () => {
		formData.value = {
			name: undefined,
			type: undefined,
			url: undefined,
			status: 0
		}
		formRef.value?.resetFields()
	}
</script>